<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据库表管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        danger: '#EF4444',
                        warning: '#F59E0B',
                        dark: '#1F2937',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .table-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .hover-scale {
                transition: transform 0.2s ease-in-out;
            }
            .hover-scale:hover {
                transform: scale(1.02);
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 min-h-screen flex flex-col">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-md sticky top-0 z-10">
    <div class="container mx-auto px-4 py-4 flex justify-between items-center">
        <div class="flex items-center space-x-2">
            <i class="fa fa-database text-primary text-2xl"></i>
            <h1 class="text-xl font-bold text-dark">数据库表管理系统</h1>
        </div>
        <div class="flex items-center space-x-4">
            <div class="relative">
                <input type="text" id="tableSearch" placeholder="搜索表..."
                       class="pl-9 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 w-64">
                <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
            </div>
        </div>
    </div>
</header>

<!-- 主内容区 -->
<main class="flex-grow container mx-auto px-4 py-8">
    <div class="mb-6 flex justify-between items-center">
        <h2 class="text-2xl font-bold text-dark">数据表列表</h2>
        <div class="flex space-x-3">
            <button id="addTableBtn" class="bg-secondary hover:bg-secondary/90 text-white px-4 py-2 rounded-lg flex items-center transition-all hover-scale">
                <i class="fa fa-plus mr-2"></i>添加表
            </button>
            <button id="deleteTableBtn" class="bg-danger hover:bg-danger/90 text-white px-4 py-2 rounded-lg flex items-center transition-all hover-scale" disabled>
                <i class="fa fa-trash mr-2"></i>删除表
            </button>
        </div>
    </div>

    <!-- 表列表区域 -->
    <div class="bg-white rounded-xl p-6 table-shadow">
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-10">
                        <input type="checkbox" id="selectAll" class="rounded border-gray-300 text-primary focus:ring-primary">
                    </th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">表名</th>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                </tr>
                </thead>
                <tbody id="tableList" class="bg-white divide-y divide-gray-200">
                <!-- 表数据将通过JavaScript动态填充 -->
                <tr class="animate-pulse">
                    <td colspan="3" class="px-6 py-10 text-center text-gray-500">
                        <i class="fa fa-circle-o-notch fa-spin mr-2"></i>加载中...
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <!-- 无数据状态 -->
        <div id="emptyState" class="hidden py-16 text-center">
            <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10 mb-4">
                <i class="fa fa-folder-open text-primary text-2xl"></i>
            </div>
            <h3 class="text-lg font-medium text-gray-900 mb-2">暂无数据表</h3>
            <p class="text-gray-500 max-w-md mx-auto">点击上方"添加表"按钮创建新的数据表</p>
        </div>
    </div>
</main>

<!-- 页脚 -->
<footer class="bg-dark text-white py-6">
    <div class="container mx-auto px-4">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="mb-4 md:mb-0">
                <p>&copy; 2025 数据库表管理系统</p>
            </div>
            <div class="flex space-x-6">
                <a href="#" class="text-gray-400 hover:text-white transition-colors">
                    <i class="fa fa-question-circle"></i> 帮助
                </a>
                <a href="#" class="text-gray-400 hover:text-white transition-colors">
                    <i class="fa fa-cog"></i> 设置
                </a>
            </div>
        </div>
    </div>
</footer>

<!-- 添加表模态框 -->
<div id="addTableModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl mx-4 transform transition-all">
        <div class="p-6 border-b border-gray-200">
            <h3 class="text-lg font-bold text-dark">创建新表</h3>
        </div>
        <div class="p-6">
            <div class="mb-4">
                <label for="newTableName" class="block text-sm font-medium text-gray-700 mb-1">表名</label>
                <input type="text" id="newTableName" placeholder="输入表名"
                       class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50">
            </div>
            <div class="mb-4">
                <label for="tableSchema" class="block text-sm font-medium text-gray-700 mb-1">表结构SQL</label>
                <textarea id="tableSchema" rows="8" placeholder="CREATE TABLE ..."
                          class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50"></textarea>
                <p class="text-xs text-gray-500 mt-1">*MySQL 表名必须以字母或下划线开头，后面可以跟字母、数字或下划线*</p>
                <p class="text-xs text-gray-500 mt-1">示例: CREATE TABLE users (id INT PRIMARY KEY, name VARCHAR(50))</p>
            </div>
        </div>
        <div class="p-6 border-t border-gray-200 flex justify-end space-x-3">
            <button id="cancelAddTable" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">取消</button>
            <button id="confirmAddTable" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">创建</button>
        </div>
    </div>
</div>

<!-- 表详情模态框 -->
<div id="tableDetailModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-4xl mx-4 max-h-[90vh] flex flex-col transform transition-all">
        <div class="p-6 border-b border-gray-200 flex justify-between items-center">
            <h3 class="text-lg font-bold text-dark" id="detailModalTitle">表详情</h3>
            <button id="closeDetailModal" class="text-gray-500 hover:text-gray-700">
                <i class="fa fa-times"></i>
            </button>
        </div>
        <div class="p-6 overflow-y-auto flex-grow">
            <div class="mb-6">
                <h4 class="text-md font-medium text-dark mb-3">表结构</h4>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50">
                        <tr>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">列名</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">数据类型</th>
                            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">是否可为空</th>
                        </tr>
                        </thead>
                        <tbody id="tableStructure" class="bg-white divide-y divide-gray-200">
                        <!-- 表结构数据将通过JavaScript动态填充 -->
                        <tr class="animate-pulse">
                            <td colspan="3" class="px-6 py-10 text-center text-gray-500">
                                <i class="fa fa-circle-o-notch fa-spin mr-2"></i>加载中...
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div>
                <h4 class="text-md font-medium text-dark mb-3">表数据</h4>
                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-gray-200">
                        <thead class="bg-gray-50" id="tableDataHeader">
                        <!-- 表头数据将通过JavaScript动态填充 -->
                        </thead>
                        <tbody id="tableData" class="bg-white divide-y divide-gray-200">
                        <!-- 表数据将通过JavaScript动态填充 -->
                        <tr class="animate-pulse">
                            <td colspan="10" class="px-6 py-10 text-center text-gray-500">
                                <i class="fa fa-circle-o-notch fa-spin mr-2"></i>加载中...
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="p-6 border-t border-gray-200 flex justify-between items-center">
            <div class="text-sm text-gray-500" id="tableDataInfo">共0条记录</div>
            <div class="flex space-x-2">
                <button class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" id="prevPage" disabled>
                    <i class="fa fa-chevron-left"></i>
                </button>
                <span class="px-3 py-1" id="currentPageInfo">第1页</span>
                <button class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed" id="nextPage" disabled>
                    <i class="fa fa-chevron-right"></i>
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 提示消息组件 -->
<div id="toast" class="fixed top-4 right-4 max-w-sm w-full bg-white rounded-lg shadow-lg p-4 transform transition-all duration-300 translate-x-full opacity-0 z-50 flex items-start">
    <div id="toastIcon" class="mr-3 text-2xl"></div>
    <div class="flex-1">
        <h4 id="toastTitle" class="font-medium text-gray-900"></h4>
        <p id="toastMessage" class="text-sm text-gray-600 mt-1"></p>
    </div>
    <button id="closeToast" class="ml-2 text-gray-400 hover:text-gray-600">
        <i class="fa fa-times"></i>
    </button>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 全局变量
        let selectedTableName = null;
        let currentTableData = [];
        let currentPage = 1;
        const pageSize = 10;
        let allTables = []; // 存储所有表名用于搜索

        // 获取表列表
        fetchTables();

        // 事件监听
        document.getElementById('addTableBtn').addEventListener('click', showAddTableModal);
        document.getElementById('cancelAddTable').addEventListener('click', hideAddTableModal);
        document.getElementById('confirmAddTable').addEventListener('click', handleAddTable);
        document.getElementById('deleteTableBtn').addEventListener('click', handleDeleteTable);
        document.getElementById('closeDetailModal').addEventListener('click', hideTableDetailModal);
        document.getElementById('selectAll').addEventListener('change', handleSelectAll);
        document.getElementById('closeToast').addEventListener('click', hideToast);
        document.getElementById('prevPage').addEventListener('click', goToPrevPage);
        document.getElementById('nextPage').addEventListener('click', goToNextPage);
        document.getElementById('tableSearch').addEventListener('input', handleTableSearch);

        // 获取表列表
        function fetchTables() {
            fetch('/table/getTables')
                .then(response => {
                    if (!response.ok) {
                        throw new Error('获取表列表失败');
                    }
                    return response.json();
                })
                .then(tables => {
                    allTables = tables; // 存储所有表名用于搜索
                    renderTableList(tables);
                })
                .catch(error => {
                    showToast('错误', error.message, 'error');
                    console.error('获取表列表错误:', error);
                });
        }

        // 渲染表列表
        function renderTableList(tables) {
            const tableListEl = document.getElementById('tableList');
            const emptyStateEl = document.getElementById('emptyState');

            if (tables.length === 0) {
                tableListEl.innerHTML = '';
                emptyStateEl.classList.remove('hidden');
                return;
            }

            emptyStateEl.classList.add('hidden');
            tableListEl.innerHTML = '';

            tables.forEach(table => {
                const tr = document.createElement('tr');
                tr.className = 'hover:bg-gray-50 transition-colors';
                tr.innerHTML = `
                    <td class="px-6 py-4 whitespace-nowrap">
                        <input type="checkbox" class="table-checkbox rounded border-gray-300 text-primary focus:ring-primary" data-table="${table}">
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <a href="#" class="table-link text-primary hover:underline" data-table="${table}">
                            ${table}
                        </a>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                        <button class="text-primary hover:text-primary/80 mr-3 view-table" data-table="${table}">
                            <i class="fa fa-eye mr-1"></i>查看
                        </button>
                        <button class="text-danger hover:text-danger/80 delete-table" data-table="${table}">
                            <i class="fa fa-trash mr-1"></i>删除
                        </button>
                    </td>
                `;
                tableListEl.appendChild(tr);
            });

            // 为每个表链接添加点击事件（修复：确保跳转到正确界面）
            document.querySelectorAll('.table-link').forEach(el => {
                el.addEventListener('click', function(e) {
                    e.preventDefault();
                    const tableName = this.getAttribute('data-table');
                    location.href = `/message/getTableStruct/${encodeURIComponent(tableName)}`;
                });
            });

            // 为查看按钮添加点击事件
            document.querySelectorAll('.view-table').forEach(el => {
                el.addEventListener('click', function(e) {
                    e.preventDefault();
                    const tableName = this.getAttribute('data-table');
                    currentPage = 1;
                    fetchTableDetails(tableName);
                });
            });

            // 为每个删除按钮添加点击事件
            document.querySelectorAll('.delete-table').forEach(el => {
                el.addEventListener('click', function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    const tableName = this.getAttribute('data-table');
                    if (confirm(`确定要删除表 "${tableName}" 吗？此操作不可恢复。`)) {
                        deleteTable(tableName);
                    }
                });
            });

            // 为每个复选框添加点击事件
            document.querySelectorAll('.table-checkbox').forEach(el => {
                el.addEventListener('change', handleTableSelection);
            });
        }

        // 处理表选择
        function handleTableSelection() {
            const checkboxes = document.querySelectorAll('.table-checkbox:checked');
            const deleteBtn = document.getElementById('deleteTableBtn');

            if (checkboxes.length === 1) {
                deleteBtn.disabled = false;
                selectedTableName = checkboxes[0].getAttribute('data-table');
            } else {
                deleteBtn.disabled = true;
                selectedTableName = null;
            }
        }

        // 处理全选
        function handleSelectAll() {
            const isChecked = this.checked;
            const checkboxes = document.querySelectorAll('.table-checkbox');
            const deleteBtn = document.getElementById('deleteTableBtn');

            checkboxes.forEach(checkbox => {
                checkbox.checked = isChecked;
            });

            if (isChecked && checkboxes.length === 1) {
                deleteBtn.disabled = false;
                selectedTableName = checkboxes[0].getAttribute('data-table');
            } else {
                deleteBtn.disabled = true;
                selectedTableName = null;
            }
        }

        // 显示添加表模态框
        function showAddTableModal() {
            document.getElementById('addTableModal').classList.remove('hidden');
            document.getElementById('newTableName').focus();
        }

        // 隐藏添加表模态框
        function hideAddTableModal() {
            document.getElementById('addTableModal').classList.add('hidden');
            document.getElementById('newTableName').value = '';
            document.getElementById('tableSchema').value = '';
        }

        // 处理添加表
        function handleAddTable() {
            const tableName = document.getElementById('newTableName').value.trim();
            const schema = document.getElementById('tableSchema').value.trim();

            if (!tableName) {
                showToast('提示', '请输入表名', 'warning');
                return;
            }

            if (!schema) {
                showToast('提示', '请输入表结构SQL', 'warning');
                return;
            }

            fetch(`/table/addTable/${encodeURIComponent(schema)}`, {
                method: 'GET'
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('创建表失败');
                    }
                    return response.text();
                })
                .then(result => {
                    if (result === '创建成功') {
                        showToast('成功', '表创建成功', 'success');
                        hideAddTableModal();
                        fetchTables();
                    } else {
                        showToast('失败', result || '表创建失败', 'error');
                    }
                })
                .catch(error => {
                    showToast('错误', error.message, 'error');
                    console.error('创建表错误:', error);
                });
        }

        // 处理删除表
        function handleDeleteTable() {
            if (!selectedTableName) {
                showToast('提示', '请选择一个表', 'warning');
                return;
            }

            if (confirm(`确定要删除表 "${selectedTableName}" 吗？此操作不可恢复。`)) {
                deleteTable(selectedTableName);
            }
        }

        // 删除表
        function deleteTable(tableName) {
            fetch(`/table/deleteTable/${encodeURIComponent(tableName)}`, {
                method: 'GET'
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('删除表失败');
                    }
                    return response.text();
                })
                .then(result => {
                    if (result === '删除成功') {
                        showToast('成功', '表删除成功', 'success');
                        fetchTables();
                        document.getElementById('deleteTableBtn').disabled = true;
                        selectedTableName = null;
                    } else {
                        showToast('失败', result || '表删除失败', 'error');
                    }
                })
                .catch(error => {
                    showToast('错误', error.message, 'error');
                    console.error('删除表错误:', error);
                });
        }

        // 获取表详情
        function fetchTableDetails(tableName) {
            selectedTableName = tableName;
            document.getElementById('detailModalTitle').textContent = `表详情: ${tableName}`;
            document.getElementById('tableDetailModal').classList.remove('hidden');

            // 显示加载状态
            document.getElementById('tableStructure').innerHTML = `
        <tr class="animate-pulse">
            <td colspan="3" class="px-6 py-10 text-center text-gray-500">
                <i class="fa fa-circle-o-notch fa-spin mr-2"></i>加载中...
            </td>
        </tr>
    `;

            document.getElementById('tableDataHeader').innerHTML = '';
            document.getElementById('tableData').innerHTML = `
        <tr class="animate-pulse">
            <td colspan="10" class="px-6 py-10 text-center text-gray-500">
                <i class="fa fa-circle-o-notch fa-spin mr-2"></i>加载中...
            </td>
        </tr>
    `;

            let columnNames = [];

            // 获取表结构
            fetch(`/table/getTableStructure/${encodeURIComponent(tableName)}`)
                .then(response => {
                    if (!response.ok) {
                        throw new Error('获取表结构失败');
                    }
                    return response.json();
                })
                .then(columns => {
                    renderTableStructure(columns);
                    columnNames = columns.map(column => column.columnName);

                    // 先渲染表头再加载数据，确保表头存在
                    renderTableDataHeader(columnNames);

                    // 获取表数据
                    return fetch(`/table/getTableData/${encodeURIComponent(tableName)}?page=${currentPage}&size=${pageSize}`);
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('获取表数据失败');
                    }
                    return response.json();
                })
                .then(data => {
                    currentTableData = data;
                    renderTableData(data, columnNames);
                    updatePagination(data.length);
                })
                .catch(error => {
                    document.getElementById('tableStructure').innerHTML = `
                <tr>
                    <td colspan="3" class="px-6 py-10 text-center text-red-500">
                        <i class="fa fa-exclamation-circle mr-2"></i>${error.message}
                    </td>
                </tr>
            `;
                    console.error('获取表信息错误:', error);
                });
        }

        // 渲染表数据表头
        function renderTableDataHeader(columnNames) {
            const tableDataHeaderEl = document.getElementById('tableDataHeader');
            tableDataHeaderEl.innerHTML = '';

            if (!columnNames || columnNames.length === 0) {
                tableDataHeaderEl.innerHTML = `
                <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">无列信息</th>
                </tr>
            `;
                return;
            }

            // 渲染表头
            let headerHtml = '<tr>';
            columnNames.forEach(name => {
                headerHtml += `
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">${name}</th>
                `;
            });
            headerHtml += '</tr>';
            tableDataHeaderEl.innerHTML = headerHtml;
        }

        // 渲染表结构
        function renderTableStructure(columns) {
            const tableStructureEl = document.getElementById('tableStructure');
            tableStructureEl.innerHTML = '';

            if (!columns || columns.length === 0) {
                tableStructureEl.innerHTML = `
                <tr>
                    <td colspan="3" class="px-6 py-10 text-center text-gray-500">
                        <i class="fa fa-info-circle mr-2"></i>没有表结构信息...
                    </td>
                </tr>
            `;
                return;
            }

            columns.forEach(column => {
                const tr = document.createElement('tr');
                tr.className = 'hover:bg-gray-50 transition-colors';
                tr.innerHTML = `
                <td class="px-6 py-4">${column.columnName || '-'}</td>
                <td class="px-6 py-4">${column.columnType || '-'}</td>
                <td class="px-6 py-4">${column.isNullable ? '是' : '否'}</td>
            `;
                tableStructureEl.appendChild(tr);
            });
        }

        // 渲染表数据
        function renderTableData(data, columnNames) {
            const tableDataEl = document.getElementById('tableData');
            tableDataEl.innerHTML = '';

            if (!data || data.length === 0) {
                tableDataEl.innerHTML = `
                <tr>
                    <td colspan="${columnNames.length}" class="px-6 py-10 text-center text-gray-500">
                        <i class="fa fa-info-circle mr-2"></i>没有找到数据...
                    </td>
                </tr>
            `;
                return;
            }

            // 渲染数据行
            data.forEach(row => {
                const tr = document.createElement('tr');
                tr.className = 'hover:bg-gray-50 transition-colors';
                tr.innerHTML = `
                        ${Object.values(row).map(value => `
                            <td class="px-6 py-4">${value !== null ? value : '-'}</td>
                        `).join('')}
                    `;
                tableDataEl.appendChild(tr);
            });
        }

        // 更新分页信息
        function updatePagination(totalRecords) {
            const prevPageBtn = document.getElementById('prevPage');
            const nextPageBtn = document.getElementById('nextPage');
            const currentPageInfo = document.getElementById('currentPageInfo');
            const tableDataInfo = document.getElementById('tableDataInfo');

            currentPageInfo.textContent = `第${currentPage}页`;
            tableDataInfo.textContent = `共${totalRecords}条记录`;

            prevPageBtn.disabled = currentPage <= 1;
            nextPageBtn.disabled = currentTableData.length < pageSize;
        }

        // 上一页
        function goToPrevPage() {
            if (currentPage > 1) {
                currentPage--;
                fetchTableDetails(selectedTableName);
            }
        }

        // 下一页
        function goToNextPage() {
            if (currentTableData.length >= pageSize) {
                currentPage++;
                fetchTableDetails(selectedTableName);
            }
        }

        // 隐藏表详情模态框
        function hideTableDetailModal() {
            document.getElementById('tableDetailModal').classList.add('hidden');
        }

        // 搜索表
        function handleTableSearch() {
            const searchText = this.value.toLowerCase().trim();

            // 如果搜索为空，显示所有表
            if (searchText === '') {
                renderTableList(allTables);
                return;
            }

            // 过滤匹配的表
            const filteredTables = allTables.filter(table =>
                table.toLowerCase().includes(searchText)
            );

            // 渲染过滤后的结果
            renderTableList(filteredTables);
        }

        // 显示提示消息
        function showToast(title, message, type = 'info') {
            const toastEl = document.getElementById('toast');
            const toastTitleEl = document.getElementById('toastTitle');
            const toastMessageEl = document.getElementById('toastMessage');
            const toastIconEl = document.getElementById('toastIcon');

            toastEl.className = 'fixed top-4 right-4 max-w-sm w-full rounded-lg shadow-lg p-4 transform transition-all duration-300 translate-x-full opacity-0 z-50 flex items-start';

            if (type === 'success') {
                toastEl.classList.add('bg-green-50', 'border-l-4', 'border-green-400');
                toastIconEl.className = 'fa fa-check-circle text-green-500';
            } else if (type === 'error') {
                toastEl.classList.add('bg-red-50', 'border-l-4', 'border-red-400');
                toastIconEl.className = 'fa fa-exclamation-circle text-red-500';
            } else if (type === 'warning') {
                toastEl.classList.add('bg-yellow-50', 'border-l-4', 'border-yellow-400');
                toastIconEl.className = 'fa fa-exclamation-triangle text-yellow-500';
            } else {
                toastEl.classList.add('bg-blue-50', 'border-l-4', 'border-blue-400');
                toastIconEl.className = 'fa fa-info-circle text-blue-500';
            }

            toastTitleEl.textContent = title;
            toastMessageEl.textContent = message;

            setTimeout(() => {
                toastEl.classList.remove('translate-x-full', 'opacity-0');
            }, 100);

            setTimeout(hideToast, 5000);
        }

        // 隐藏提示消息
        function hideToast() {
            const toastEl = document.getElementById('toast');
            toastEl.classList.add('translate-x-full', 'opacity-0');
        }
    });
</script>
</body>
</html>